<template>
  <scroll class="suggest"
          :data="result"
          :pullup="pullup"
          @scrollToEnd="searchMore"
          ref="suggest"
          :beforeScroll="beforeScroll"
          @beforeScroll="listScroll"


  >
    <ul class="suggest-list">
      <li @click="selectItem(item)" class="suggest-item" v-for="item in result">
        <div class="icon">
          <i :class="getIconCls(item)"></i>
        </div>
        <div class="name">
          <p class="text" v-html="getDisplayName(item)"></p>
        </div>
      </li>
      <loading v-show="hasMore"></loading>
    </ul>
    <div v-show="!hasMore && !result.length" class="no-result-wrapper">
      <no-result title="抱歉，暂无搜索结果"></no-result>
    </div>

  </scroll>


</template>

<script type="text/ecmascript-6">
  import {search} from "api/search";
  import {ERR_OK} from "api/config";
  import {filterSinger} from "common/js/song";
  import {createSong, getSongVkey} from "common/js/song";
  import Scroll from "base/scroll/scroll"
  import Loading from 'base/loading/loading'
  import Singer from  'common/js/singer'
  const TYPE_SINGER = 'singer'
  import NoResult from 'base/no-result/no-result'
  const perpage = 20
  import {mapGetters, mapMutations, mapActions} from 'vuex'


  export default {
    name: "suggest",
    props: {
      query: {
        type: String,
        default: ''
      },
      showSinger: {
        type: Boolean,
        default: true
      },
      clear: {
        type: Boolean,
        default: false
      }
    },

    components: {
      Scroll,
      Loading,
      NoResult
    },
    data() {
      return {
        page: 1,
        result: [],
        pullup: true,
        hasMore: true,
        beforeScroll:true
      }
    },
    methods: {

      refresh(){
        this.$refs.suggest.refresh()

      },
      listScroll(){
        this.$emit('listScroll')
      },
      selectItem(item){
        if (item.type=== TYPE_SINGER){
          const singer = new Singer({
            id:item.singermid,
            name:item.singername
          })
          this.$router.push({
            path:`/search/${singer.id}`
          })

          this.setSinger(singer)

        }else{
          this.insertSong(item)
        }
        this.$emit('select')

      },
      getDisplayName(item) {

        if (item.type === TYPE_SINGER) {
          return item.singername
        } else {
          return `${item.name}-${item.singer}`
        }

      },
      getIconCls(item) {
        if (item.type === TYPE_SINGER) {
          return 'icon-mine'
        } else {
          return 'icon-music'
        }

      },
      search() {
        this.page = 1

        this.hasMore = true
        this.$refs.suggest.scrollTo(0,0)
        search(this.query, this.page, this.showSinger, perpage).then((res) => {
          console.log(res)
          if (res.code === ERR_OK) {
            this.result =  this.result.concat(this._genResult(res.data))
            this._checkMore(res.data)

          }
        })
      },
      _checkMore(data) {
        const song = data.song
        if (!song.list.length || (song.curnum + song.curpage * perpage) >= song.totalnum) {
          this.hasMore = false
        }

      },

      searchMore() {

        if (!this.hasMore) {
          console.log('hasMore: ' + this.hasMore)
          return
        }

        this.page++
        search(this.query, this.page, this.showSinger, perpage).then((res) => {
          if (res.code === ERR_OK) {
            console.log(res.data)
            this.result.concat(this._genResult(res.data))
            this._checkMore(res.data)
          }
        })

      },
      _genResult(data) {

        let ret = [];

        if (data.zhida && data.zhida.singerid) {
          ret.push({...data.zhida, ...{type: TYPE_SINGER}})
        }
        if (data.song) {
          this._normalizeSongs(data.song.list)
          ret = ret.concat(this.result)
          //console.log(ret);

          return ret

        }

      },

      _normalizeSongs(list) {
        //this.result = []
        list.forEach((item) => {
          // 解构赋值-拿到item 下的 musicData 列表数据

          //------------- 更新的加上vkey
          getSongVkey(item.songmid).then((res) => {
            const vkey = res.data.items[0].vkey;
            if (item.songid && item.albummid) {
              this.result.push(createSong(item, vkey))
            }

          })

        })

      },
      ...mapMutations({
        setSinger:'SET_SINGER'
      }),
      ...mapActions([
        'insertSong'
      ])

    },
    watch: {
      query(newQuery) {
        //console.log("newQuery: "+newQuery);
        this.result = []
        this.search(newQuery)
      },
      clear(newClear) {
       // console.log("newClear:  " + newClear);

        this.result = []

      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .suggest
    height: 100%
    overflow: hidden
    .suggest-list
      padding: 0 30px
      .suggest-item
        display: flex
        align-items: center
        padding-bottom: 20px
      .icon
        flex: 0 0 30px
        width: 30px
        [class^="icon-"]
          font-size: 14px
          color: $color-text-d
      .name
        flex: 1
        font-size: $font-size-medium
        color: $color-text-d
        overflow: hidden
        .text
          no-wrap()
    .no-result-wrapper
      position: absolute
      width: 100%
      top: 50%
      transform: translateY(-50%)
</style>


/*  _normalizeSongs(list) {
list.forEach((item,index) => {

this.result.push(index)

getSongVkey(item.songmid).then((res) => {
const vkey = res.data.items[0].vkey;
if (item.songid && item.albummid) {
let value =createSong(item, vkey);
this.result[index] = value;

}
})

})
return this.result;
}*/
